/* cosmetics */

@import url(https://fonts.googleapis.com/css?family=Muli);

* {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

/* page layout */

body {
	display: grid; /* puts all children of the body in a grid */
	/* getting seven columns will be harder;  consider using the fr unit instead of % */

    grid-template-columns:  2fr 5fr;
    
	/* cosmetics */
	padding: 1em;
	font-family: Muli;
}

img {
	width: 100%;
}

                                                            /* my code  */


 /* the header has 2 elements that can be divided into columns                                                            */
header{
    display: grid;
    grid-template-columns: 1fr 2fr ;
    grid-column: 1/ span 2;
}

/* this is to shape the images to fit into header */

header img{
    align-self: center;
    width: 50px;
    height: 50px;
    /* border: 2px solid purple; */
}

/* this nav has two unordered lists that can be divided equally */
nav{
    display: grid;
    grid-template-columns: auto auto;
}


/* this nav id has 4 links can be displayed uniformly */
#nav{
    display: grid;
    grid-template-columns: auto auto auto auto; 
    list-style-type: none;
    margin-left: 0;
    padding:0;
    /* border: 2px solid aqua; */
    place-content: center;

}

#nav li a{
    text-decoration: none;
    padding: 20px;
    display: block;
    margin-right:40px ;
    /* border: 2px solid red; */
}


h1{
    /* border: 2px solid red; */
    place-content: center;
}
#sn{
    display:grid ;
   grid-template-columns:  auto auto;
   list-style-type: none;
   margin-top: 10px;
   padding: 0;
}

 
/* this divides the pictures into 4 columns */
#gallery{
    display: grid;
    grid-template-columns: auto auto auto auto;
    /* border:2px solid green; */
    grid-column: 2 / span 1;
}


aside{
    
    grid-column: 1 / span 1;
    grid-row:2/ span 1;
}
footer{
    display: grid;
    grid-template-columns: auto auto;
    /* border: 2px solid red; */
   grid-column:1/ span 2;
   margin: 10px;
   padding: 10px;
}

footer #validation{
    justify-self: right;
}